<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        #game-board {
            border: 1px solid #000;
            display: block;
        }

        button {
            margin-bottom: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<button id="start-button">开始游戏</button>
<canvas id="game-board" width="400" height="400"></canvas>

<script>
  const canvas = document.getElementById('game-board');
  const ctx = canvas.getContext('2d');
  const startButton = document.getElementById('start-button');

  const blockSize = 20;
  let snake;
  let food;
  let direction;
  let gameOver;
  let gameInterval;

  function initializeGame() {
    snake = [
      { x: 10 * blockSize, y: 10 * blockSize }
    ];
    food = {
      x: Math.floor(Math.random() * (canvas.width / blockSize)) * blockSize,
      y: Math.floor(Math.random() * (canvas.height / blockSize)) * blockSize
    };
    direction = 'right';
    gameOver = false;
  }

  function drawSnake() {
    ctx.fillStyle = 'green';
    snake.forEach(segment => {
      ctx.fillRect(segment.x, segment.y, blockSize, blockSize);
    });
  }

  function drawFood() {
    ctx.fillStyle = 'red';
    ctx.fillRect(food.x, food.y, blockSize, blockSize);
  }

  function moveSnake() {
    const head = { ...snake[0] };
    switch (direction) {
      case 'right':
        head.x += blockSize;
        break;
      case 'left':
        head.x -= blockSize;
        break;
      case 'up':
        head.y -= blockSize;
        break;
      case 'down':
        head.y += blockSize;
        break;
    }
    snake.unshift(head);

    if (head.x === food.x && head.y === food.y) {
      food = {
        x: Math.floor(Math.random() * (canvas.width / blockSize)) * blockSize,
        y: Math.floor(Math.random() * (canvas.height / blockSize)) * blockSize
      };
    } else {
      snake.pop();
    }
  }

  function checkCollision() {
    const head = snake[0];
    if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
      gameOver = true;
    }
    for (let i = 1; i < snake.length; i++) {
      if (head.x === snake[i].x && head.y === snake[i].y) {
        gameOver = true;
      }
    }
  }

  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawSnake();
    drawFood();
  }

  function update() {
    if (gameOver) {
      clearInterval(gameInterval);
      alert('游戏结束！');
      return;
    }
    moveSnake();
    checkCollision();
    draw();
  }

  document.addEventListener('keydown', function (event) {
    switch (event.key) {
      case 'ArrowRight':
        if (direction!== 'left') direction = 'right';
        break;
      case 'ArrowLeft':
        if (direction!== 'right') direction = 'left';
        break;
      case 'ArrowUp':
        if (direction!== 'down') direction = 'up';
        break;
      case 'ArrowDown':
        if (direction!== 'up') direction = 'down';
        break;
    }
  });

  startButton.addEventListener('click', function () {
    initializeGame();
    // 将时间间隔从 100 毫秒调整为 200 毫秒，使游戏速度变慢
    gameInterval = setInterval(update, 200);
  });
</script>
</body>
</html>
